<template>
    <ContentBase>
        <div>
            <main class="py-4">
                <section class="container">
                    <h2 class="h5 text-center">用户中心</h2>
                    <div class="row g-4 user-profile">
                        <div class="col-md-4">
                            <div class="card">
                                <img src="../assets/头像.jpg" class="img-thumbnail" alt="...">
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-body">
                                    <h3 class="card-title" style="margin:0px">个人信息</h3>
                                    <div class="container">
                                        <div class="row" style="text-align: left;">
                                            <div class="col-3">
                                                用户名：{{ userinfo.username }}
                                            </div>
                                            <div class="col-6">
                                                用户id: {{ userinfo.id }}
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <form>
                                        <div class="mb-3">
                                            <label for="username" class="form-label">用户名：</label>
                                            <input type="text" id="username" class="form-control" :value="username"
                                                readonly>
                                        </div>
                                        <div class="mb-3">
                                            <label for="email" class="form-label">邮箱</label>
                                            <input type="email" id="email" class="form-control" v-model="email">
                                        </div>
                                        <div class="mb-3">
                                            <label for="password" class="form-label">密码：</label>
                                            <input type="password" id="password" class="form-control" placeholder="输入新密码"
                                                v-model="password">
                                        </div>
                                        <div class="mb-3">
                                            <label for="confirm-password" class="form-label">确认密码：</label>
                                            <input type="password" id="confirm-password" class="form-control"
                                                placeholder="再次输入新密码" v-model="confirmPassword">
                                        </div>
                                        <button type="button" class="btn btn-primary" @click="saveChanges">保存修改</button>
                                    </form> -->
                                </div>
                            </div>
                            <div class="card" style="margin-top: 20px;">
                                <div class="card-body">
                                    <div class="row" style="margin-top:15px; text-align: left;">
                                        <div class="col-1" style="padding: 10px;font-size: 16px;width: 200px;height: 40px;">
                                            专业：
                                        </div>
                                        <div class="col-9">
                                            <input type="text" v-model="userinfo.major" placeholder="暂未填写">
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top:15px; text-align: left;">
                                        <div class="col-1" style="padding: 10px;font-size: 16px;width: 200px;height: 40px;">
                                            年级：
                                        </div>
                                        <div class="col-9">
                                            <input type="text" v-model="userinfo.grade" placeholder="暂未填写">
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top:15px; text-align: left;">
                                        <div class="col-1" style="padding: 10px;font-size: 16px;width: 200px;height: 40px;">
                                            email：
                                        </div>
                                        <div class="col-9">
                                            <input type="text" v-model="userinfo.email" placeholder="暂未填写">
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top:15px; text-align: left;">
                                        <div class="col-1" style="padding: 10px;font-size: 16px;width: 200px;height: 40px;">
                                            电话：
                                        </div>
                                        <div class="col-9">
                                            <input type="text" v-model="userinfo.phonenumber" placeholder="暂未填写">
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top:15px;display: flex;justify-content: center;">
                                        <button @click="updateinfo" type="button" class="btn btn-primary"
                                            style="width: 80%;">提交修改</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
        </div>

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
            点我修改密码
        </button>

        <!-- dialog弹框 -->
        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="staticBackdropLabel">修改密码</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div class="col-9">
                            <input type="password" v-model="newpassword.pass1" placeholder="新密码">
                        </div>
                        <div class="col-9" style="margin-top: 20px;">
                            <input type="password" v-model="newpassword.pass2" placeholder="确认密码">
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-dark" data-bs-dismiss="modal">取消修改</button>
                        <button type="button" class="btn btn-dark" @click="changePassword">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </ContentBase>
</template>
  
<script>
import { reactive, ref } from 'vue'
import ContentBase from '../components/ContentBase.vue';
import $ from 'jquery';

export default {
    name: 'PersonInfo',
    components: {
        ContentBase,
    },
    setup() {
        const userinfo = reactive({
            id: ref(''),
            username: ref(''),
            major: ref(''),
            grade: ref(''),
            email: ref(''),
            phonenumber: ref(''),
        })

        const newpassword = reactive({
            pass1: ref(''),
            pass2: ref(''),
        })

        let changePassword = () => {
            if (newpassword.pass1 != newpassword.pass2) {
                alert("两次密码不同!");
            }
            else {
                $.ajax({
                    url: "http://10.142.225.1:3000/user/changePassword",
                    type: "post",
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem("token")
                    },
                    data: {
                        username: userinfo.username,
                        newpassword: newpassword.pass1,
                    },
                    success(resp) {
                        alert(resp.message);
                    },
                    error() {
                        alert("失败");
                    }
                })
            }
        }

        let getUserInfo = () => {
            $.ajax({
                url: "http://10.142.225.1:3000/user/myinfomation",
                type: "post",
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                },
                success(resp) {
                    userinfo.id = resp.id;
                    userinfo.username = resp.name;
                    userinfo.major = resp.majorid;
                    userinfo.grade = resp.grade;
                    userinfo.email = resp.email;
                    userinfo.phonenumber = resp.phone_number;
                }
            })
        }

        let updateinfo = () => {
            $.ajax({
                url: 'http://10.142.225.1:3000/user/edit',
                type: "post",
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                },
                data: {
                    username: userinfo.username,
                    major: userinfo.major,
                    grade: userinfo.grade,
                    email: userinfo.email,
                    phonenumber: userinfo.phonenumber,
                },
                success: (resp) => {
                    alert(resp.message);
                    getUserInfo();
                }
            })
        }
        return {
            userinfo, newpassword,
            changePassword, getUserInfo, updateinfo,
        }
    },
    created() {
        this.getUserInfo();
    }
};
</script>
  
<style scoped>
body {
    font-family: "楷体", "KaiTi", serif;
}

.user-profile {
    display: flex;
    justify-content: center;
}

.user-profile .card {
    width: 100%;
}

.user-profile .card-title {
    font-size: 1.25rem;
}

input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    width: 88%;
    height: 40px;
}

input[type="password"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    width: 88%;
    height: 40px;
}
</style>
  